<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <title>轮播图列表</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">
</head>
<body>
<div style="float: left">
<div>
    <div style="float: left;width: 500px;margin-top: 20px;margin-left: 10px;">
        <div style="float: left;margin-left: 10px;" >
        <form action="/flushPicture.do" method="post">
            <input type="submit" class="layui-btn layui-btn-xs layui-btn-normal" name="hide" value="刷新页面" style="border-radius:100px;"/>
        </form>
        </div>
        <%--<div class="layui-upload site-demo-button">--%>
            <%--<button class="layui-btn layui-btn-xs layui-btn-normal add" style="float: left;margin-left: 10px;border-radius:100px;background-color: rgba(20,160,40,0.8)" id="add">添加图片</button>--%>
        <%--</div>--%>
    </div>

</div>
<div style="clear:both;float: left">
<div style="margin-top: 20px;margin-left: 20px;" class="layui-carousel" id="test3" lay-filter="test4">
    <div carousel-item="">
        <c:if test="${not empty sessionScope.pictureList}">
        <c:forEach items="${sessionScope.pictureList}" var="p">
            <div>
                <img style="height:280px;width:600px;" src="static/${p.getPicture_url()}" />
            </div>
        </c:forEach>
        </c:if>
    </div>
</div>
<div style="font-size: 20px;text-align: center;margin-top: 50px">效果演示</div>

</div>
</div>
<div class="pageall" style="display: block;float: right;margin-right: 40px;margin-top: 10px">
    <div class="showmessages">

        <table id="tbl" class="layui-table">
            <thead>
            <tr>
                <th style="width: 30px;height: 20px;text-align: center;">轮播图排序</th>
                <th style="display:none;width: 30px;height: 20px;text-align: center;">轮播图ID</th>
                <th style="width: 60px;height: 20px;text-align: center;">轮播图示图</th>
                <th style="width: 60px;height: 20px;text-align: center;">操作</th>
            </tr>
            </thead>
            <tbody id="clear" style="display: none">
            <script>var arr1=[]</script>
            <c:if test="${not empty sessionScope.pictureList}">
                <c:forEach items="${sessionScope.pictureList}" var="p" varStatus="loop">
                    <tr id="picorder${loop.count}">
                        <td name="picture_order" align="center" style="width:30px;height: 20px">${loop.count}</td>
                        <td name="picture_id" align="center" style="display:none;width: 30px;height: 20px">${p.getPicture_id()}</td>
                        <td align="center" style="width: 60px;height: 20px"><img style="width: 200px;height: 60px" src="static/${p.getPicture_url()}" /></td>
                        <td class="site-demo-button" id="layerDemo" align="center" style="width: 60px;height: 20px">
                                <div class="layui-upload">
                                    <button class="layui-btn layui-btn-xs layui-btn-normal upload" id="upload${p.getPicture_id()}" data-value="${p.getPicture_id()}"  style="float: left;margin-left: 10px;">修改图片</button>
                                </div>
                            <%--<form action="/deletePicture.do" method="post">--%>
                                <%--<input type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="deletePicture(this,${p.getPicture_id()})" style="float: left;margin-left: 10px;background-color: rgba(255,0,0,0.8);" name="hide" value="删除图片"/>--%>
                            <%--</form>--%>
                        </td>
                    </tr>
                    <script>arr1.push($("#picorder${loop.count}")[0])</script>
                </c:forEach>
            </c:if>
            </tbody>
            <tbody id="biuuu_city_list"></tbody>
        </table>
        <div id="demo20"></div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/frame/layui/layui.js" charset="utf-8"></script>
<script>
    function nodeToString ( node ) {
        var tmpNode = document.createElement( "div" );
        tmpNode.appendChild( node.cloneNode( true ) );
        var str = tmpNode.innerHTML;
        tmpNode = node = null; // prevent memory leaks in IE
        return str;
    }
    function clear(){
        document.getElementById('clear').innerHTML=null;
    }

    layui.use(['carousel', 'laypage','form','upload','jquery'], function(){
        var carousel = layui.carousel
            ,form = layui.form
            ,$=layui.jquery
            ,upload = layui.upload
            ,laypage = layui.laypage

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });
        var data1= arr1;
        laypage.render({
            elem: 'demo20'
            ,count: data1.length
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function(){
                    var arr = []
                        ,thisData = data1.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function(index, item){
                        var itemstr=nodeToString(item);
                        arr.push(itemstr);
                    });
                    clear();
                    return arr.join('');
                }();
            }
        });
        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '778px'
            ,height: '440px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });
        $(".upload").each(function(){
            var uploadInst = upload.render({
                elem: '#'+$(this).attr("id")
                ,url: '${pageContext.request.contextPath}/uploadPicture.do?picture_id='+$(this).data("value")
                // ,before: function(obj){
                //     //预读本地文件示例，不支持ie8
                //     obj.preview(function(index, file, result){
                //         $('#demo1').attr('src', result); //图片链接（base64）
                //     });
                // }
                ,done: function(res){
                    if(res==false){//自定义返回失败
                        layer.msg('上传失败',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
                    }else if(res==true){
                        layer.msg('上传成功',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
                        location.reload(true);
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        })
        $(".add").each(function(){
            var uploadInst = upload.render({
                elem: '#'+$(this).attr("id")
                ,url: '${pageContext.request.contextPath}/addPicture.do'
                // ,before: function(obj){
                //     //预读本地文件示例，不支持ie8
                //     obj.preview(function(index, file, result){
                //         $('#demo1').attr('src', result); //图片链接（base64）
                //     });
                // }
                ,done: function(res){
                    if(res==false){//自定义返回失败
                        layer.msg('上传失败',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
                    }else if(res==true){
                        layer.msg('上传成功',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
                        location.reload(true);
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        })


        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</body>
<script>
    var w=$(window).width();
    var h=$(window).height();
    $(".pageall").innerHeight(1/2*h+"px");
    $(".pageall").innerWidth(1/2*w+"px");
</script>
<script>
    function deletePicture(e,value){
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/deletePicture.do",
            data:{
                picture_id:value,
            },
            dataType:"json",
            success:function(data){
                layer.msg('删除成功',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
                location.reload(true);
            },
            error(){
                layer.msg('错误',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
            },
            fail(){
                layer.msg('删除失败',{icon: 16,time: 100000000,shade : [0.5 , '#000' , true]});
            }
        });
    }
</script>
</html>